<template>
  <div class="flex">
    <div class="flex-align-center">
      <iphone-x class="iphone-x" style="background-color: #FFFFFF;">
        <div class="posters_box">
          <el-button
            v-show="posterList.length > 1"
            circle
            type="primary"
            :icon="ArrowRightBold"
            class="next_banner_btn"
            @click="nextPoster"
          />
          <el-image :src="poster?.snapUrl||poster?.uiUrl" v-if="poster?.status === '0'" class="full" fit="cover" />
        </div>
        <div class="btn_box">
          <div class="btn-item">
            <svg-icon icon-class="wechat" class-name="btn-icon" color="#10932F" />
            <span class="btn-text">发给好友</span>
          </div>
          <div class="btn-item">
            <svg-icon icon-class="image" class-name="btn-icon" color="#1296db" />
            <span class="btn-text">保存图片</span>
          </div>
        </div>
      </iphone-x>
    </div>
    <div class="flex-1">
      <div class="setting_title">
        <div>海报</div>
        <div class="flex-1" />
        <el-button type="primary" @click="handleSave">保存海报</el-button>
      </div>
      <div class="setting-form">
        <el-form
          ref="formRef"
          :model="form"
        >
          <el-form-item prop="name" class="form-item">
            <span class="label">标题:</span>
            <el-input v-model="form[0].name" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item prop="uiUrl" class="form-item">
            <span class="label">海报:</span>
            <div class="flex-1">
              <div class="tip-box">
                建议图片尺寸：320*510像素；图片格式：jpg、png、jpeg
                <el-button type="primary" class="add-poster-btn" @click="handleAdd">添加海报</el-button>
              </div>
              <el-scrollbar class="setting_content">
                <div class="posters-container">
                  <template v-for="item in form" :key="item">
                    <div class="image_box">
                      <image-cropper-upload
                        ref="cropperRef"
                        :current-img="item.uiUrl"
                        :img-height="255"
                        :img-width="160"
                        upload-path="/admin/ui"
                        @select-img="img => item.snapUrl = img"
                      />
                      <div class="status_box">
                        <div class="status_text">是否启用</div>
                        <el-switch v-model="item.status" active-value="0" inactive-value="1" />
                      </div>
                    </div>
                  </template>
                </div>
              </el-scrollbar>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import ImageCropperUpload from "@/components/Tools/Upload/ImageCropperUpload.vue"
import { ArrowRightBold } from '@element-plus/icons-vue'
const formRef = ref(null)
const form = ref([{
  name: '',
  type: 'poster',
  uiType: 'image',
  status: "0",
  uiUrl: '',
  snapUrl: '',
}])
const theme = computed(() => $store.settings.theme)
const getList = () => {
  $xl.apis.getUiByType({jointUrl: '/poster'}).then(res => {
    form.value = res.data || []
    if (form.value.length === 0) {
      handleAdd()
    }
  })
}
getList()

const posterListIndex = ref(0)
const posterList = computed(() => form.value.filter(item => item.status === '0'))
const poster = computed(() => posterList.value[posterListIndex.value])
const nextPoster = () => {
  posterListIndex.value = (posterListIndex.value + 1) % posterList.value.length
}

const cropperRef = ref(null)

const proxy = getCurrentInstance()

const handleAdd = () => {
  form.value.push({
    type: 'poster',
    uiType: 'image',
    status: "0",
    uiUrl: '',
    snapUrl: '',
  })
}

const handleSave = () => {
  const filteredForm = form.value.filter((item) => (item.uiUrl || item.snapUrl))

  if (filteredForm.length === 0) {
    $xl.modal.msgWarning('请至少添加一项有效的海报!')
    return
  }

  nextTick(async () => {
    for (let i = 0; i < proxy.refs.cropperRef.length; i++) {
      const upload = proxy.refs.cropperRef[i]
      filteredForm[i].uiUrl = await upload.uploadImage()
    }

    const name = filteredForm[0].name
    const submitData = filteredForm.map(item => ({
      ...item,
      name,
      snapUrl: undefined
    }))

    $xl.apis.saveOrUpdateUiList({
      type: 'json',
      jointUrl: '/poster',
      params: submitData
    }).then(() => {
      getList()
      $xl.modal.msgSuccess('保存成功!')
    })
  })
}
</script>

<style lang="scss" scoped>
.iphone-x {
  margin: 0 60px;
  .next_banner_btn {
    position: absolute;
    top: 15%;
    right: 0;
    transform: translate(110%, -50%);
    z-index: 20;
  }
  .posters_box {
    width: 100%;
    height: 80%;
    .el-image{
      border-radius: 6px;
    }
  }
  .btn_box {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn-icon {
        font-size: 24px;
      }

      .btn-text {
        margin-top: 8px;
        font-size: 14px;
      }
    }
  }
}

.setting_title {
  display: flex;
  align-items: center;
  height: 25px;
  font-size: 16px;

  &::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 100%;
    margin-right: 10px;
    background-color: v-bind(theme);
  }
}

.setting-form {
  margin: 10px 0 0 15px;

  .form-item {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;


    .label {
      width: 50px;
      font-size: 18px;
    }

    .el-input {
      display: inline-block;
      width: auto;
    }

    .setting_content{
      height: 600px;
      :deep(.el-scrollbar__view) {
        padding-bottom: 20px;
      }
    }

      .tip-box {
        position: relative;
        margin-bottom: 10px;

        .add-poster-btn {
          position: absolute;
          right: 0;
        }
      }

    .posters-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .image_box {
      width: 200px;

      .status_box {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        .status_text {
          margin-right: 10px;
        }
      }
    }
  }
}

:deep(.el-form-item__content) {
  align-items: normal !important;
}
</style>
